<template>
  <div class="Detail">
    <div class="mixin">
      <div class="paper-detail">
        <div class="tushu">
          <div class="tu">
            <img src="../assets/img/tushu.png" alt="图书封面" />
          </div>
          <div class="tu-x">
            <div class="item-header">
              <div class="item-title-wrapper">
                <h1 class="item-title">
                  基于自适应遗传算法的军事训练计划智能编排
                </h1>
              </div>
              <div style="display: flex; align-items: center">
                <div class="button1" v-if="false">
                  <i class="iconfont icon-zhongyingwen"></i>翻译
                </div>
                <div class="item-action">
                  <i class="iconfont icon-shoucangliang"></i>
                  收藏
                </div>
              </div>
            </div>
            <div class="actions">
              <el-button
                type="primary"
                class="bt1"
                icon="iconfont icon-wenjianyulan"
                plain
                >在线阅读</el-button
              >
              <el-button
                type="primary"
                class="bt2"
                icon="iconfont icon-xiazai"
                plain
                >下载附件</el-button
              >
              <el-button
                type="primary"
                class="bt3"
                icon="iconfont icon-daochu2"
                plain
                >导出元数据</el-button
              >
            </div>
            <div class="book-detail-title">图书详情</div>
            <div class="book-info">
              <div class="left">
                <div class="info-item">
                  <span class="info-label">题名：</span>
                  <span class="info-content"
                    >基于自适应遗传算法的军事训练计划智能编排基于自适应遗传算法的军事训练计划智能编排基于自适应遗传算法的军事训练计划智能编排</span
                  >
                </div>
                <div class="info-item">
                  <span class="info-label">国别：</span>
                  <span class="info-content">中国</span>
                </div>
                <div class="info-item">
                  <span class="info-label">出版时间：</span>
                  <span class="info-content">2024-06</span>
                </div>
                <div class="info-item">
                  <span class="info-label">页数：</span>
                  <span class="info-content">453</span>
                </div>
                <div class="info-item">
                  <span class="info-label">出版单位：</span>
                  <span class="info-content">人民卫生出版社</span>
                </div>
              </div>
              <div class="rigth">
                <div class="info-item">
                  <span class="info-label">责任者：</span>
                  <span class="info-content">张琳琳</span>
                </div>
                <div class="info-item">
                  <span class="info-label">出版地：</span>
                  <span class="info-content">北京</span>
                </div>
                <div class="info-item">
                  <span class="info-label">语种：</span>
                  <span class="info-content">中文</span>
                </div>
                <div class="info-item">
                  <span class="info-label">lABN号：</span>
                  <span class="info-content">2930220-39201</span>
                </div>
                <div class="info-item">
                  <span class="info-label">来源出处：</span>
                  <span class="info-content">火力语指挥</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="content-intro">
          <h3 class="intro-title">内容简介</h3>
          <p class="intro-text">
            针对军事训练计划手工拟制复杂、耗时长的问题,提出一种基于自适应遗传算法的军事训练计划智能编排方法。通过分析军事训练计划编排涉及的要素及编排特点,将军事训练计划拟制问题抽象为数学模型,基于自适应遗传算法的原理完成了军事训练计划智能编排算法的设计,并采用面向对象的开发方法实现了军事训练计划智能编排功能,为计算机辅助军事训练计划编排提供了一种解决方案。仿真结果表明,该方法能够产生较好的可行解,能有效提高军事训练计划拟制效率。
          </p>
        </div>

        <div class="related-resources">
          <div class="related-resources__header">
            <div class="related-resources__line1"></div>
            <h3 class="related-resources__title">相关资源推荐</h3>
            <div class="related-resources__line2"></div>
          </div>
        </div>

        <div class="resources">
          <relatedResources></relatedResources>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import relatedResources from "@/components/relatedResources.vue";
export default {
  components: {
    relatedResources,
  },
  name: "PaperDetail",
};
</script>
<style lang="scss" scoped>
.book-detail-title {
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  font-size: 18px;
  color: #333333;
  margin-bottom: 24px;
}

.book-info {
  width: 100%;
  height: 180px;
  padding: 15px 33px;
  background: #f9faff;
  display: flex;
  .left {
    flex: 1;
  }
  .rigth {
    flex: 1;
  }
  .info-item {
    width: 414px;
    margin-bottom: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .info-label {
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 18px;
    color: #333333;
  }
  .info-content {
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 18px;
    color: #666666;
  }
}

// 内容简介区域样式
.content-intro {
  margin-top: 24px;
  padding-bottom: 45px;
  .intro-title {
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 18px;
    color: #333333;
  }
  .intro-text {
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 16px;
    color: #666666;
    line-height: 36px;
    text-align: justify; 
    padding-right: 20px;
  }
}

// 已有样式...
.button1 {
  width: 73px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #327dff;
  border-radius: 4px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 18px;
  color: #ffffff;
  margin-right: 40px;

  i {
    font-size: 18px;
    margin-right: 4px;
  }
}
.tushu {
  display: flex;
  .tu {
    width: 282px;
    height: 380px;
    img {
      width: 282px;
      height: 380px;
    }
  }
  .tu-x {
    flex: 1;
    margin-left: 24px;
    .item-header {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .item-title-wrapper {
        display: flex;
        align-items: center;
        gap: 12px;
      }

      .item-title {
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 24px;
        color: #333333;
        line-height: 30px;
      }

      .item-action {
        i {
          font-size: 18px;
          color: #999999;
        }

        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 18px;
        color: #666666;
      }
    }
    .actions {
      display: flex;
      gap: 10px;
      margin-top: 24px;
      margin-bottom: 24px;
      .bt1 {
        background: #f1a33b;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 18px;
        color: #ffffff;
        border: none;

        &:hover {
          color: #ffffff;
          background: #d08118;
        }
      }

      .bt2 {
        background: #6cbc1f;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 18px;
        color: #ffffff;
        border: none;

        &:hover {
          color: #ffffff;
          background: #559914;
        }
      }

      .bt3 {
        background: #327dff;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 18px;
        color: #ffffff;
        border: none;

        &:hover {
          color: #ffffff;
          background: #1d64e0;
        }
      }
    }
  }
}
.related-resources {
  margin-top: 45px;
}

.related-resources__header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 20px;
}

.related-resources__line1 {
  width: 550px;
  height: 2px;
  background: linear-gradient(90deg, rgba(50, 125, 255, 0) 0%, #327dff 100%);
  position: relative;

  &::before {
    content: "";
    position: absolute;
    right: -3px;
    top: 50%;
    transform: translateY(-50%);
    background: #ffffff;
    border: 2px solid #327dff;
    width: 6px;
    height: 7px;
    border-radius: 50%;
  }
}

.related-resources__line2 {
  width: 550px;
  height: 2px;
  background: linear-gradient(90deg, #327dff 0%, rgba(50, 125, 255, 0) 100%);
  position: relative;

  &::before {
    content: "";
    position: absolute;
    left: -3px;
    top: 50%;
    transform: translateY(-50%);
    background: #ffffff;
    border: 2px solid #327dff;
    width: 6px;
    height: 7px;
    border-radius: 50%;
  }
}

.related-resources__title {
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  font-size: 24px;
  color: #333333;
}

.Detail {
  padding-top: 24px;
  padding-bottom: 40px;
  display: flex;
  background: #f9faff;
  flex-direction: column;
  align-items: center;

  .mixin {
    width: 1400px;
    display: flex;
  }
}

.paper-detail {
  width: 100%;
  background: #fff;
  padding: 39px 62px 39px 62px;
}
</style>